<!--搜索聊天记录-->
<template>
    <div class="chatRecord">
        <div class="head">
            <div class="inpSearch">
                <img src="../assets/img/Search.png" class="searchIcon">
                <input type="text" v-model="searchTxt" ref="topInp">
                <img src="../assets/img/clearButton.png" class="closeIcon" @click="clearContent">
            </div>
            <p @click="back">取消</p>
        </div>
        <div class="searchContent">
            <!--联系人-->
            <div class="contact">
                <p class="headTxt">联系人</p>
                <div class="contactCol">
                    <div class="l">
                        <img src="../assets/img/messageAvatar.png">
                    </div>
                    <div class="r">
                        <p class="name"><span class="ac">老</span>中医</p>
                    </div>
                </div>
                <div class="contactCol">
                    <div class="l">
                        <img src="../assets/img/messageAvatar.png">
                    </div>
                    <div class="r">
                        <p class="name">请叫我<span class="ac">老</span>中医</p>
                    </div>
                </div>
                <div class="more">
                    <div class="l">
                        <img src="../assets/img/searchA.png" class="searchIcon">
                        <span>更多联系人</span>
                    </div>
                    <div class="r">
                        <img src="../assets/img/ArrowRight.png" class="rightIcon">
                    </div>
                </div>
            </div>

            <div class="boundary"></div>

            <!--群聊-->
            <div class="contact">
                <p class="headTxt">群聊</p>
                <div class="contactCol">
                    <div class="l">
                        <img src="../assets/img/messageAvatar.png">
                        <img src="../assets/img/groupIcon.png" class="angle">
                    </div>
                    <div class="r">
                        <p class="name">秋名山<span class="ac">老</span>司机</p>
                    </div>
                </div>
                <div class="contactCol">
                    <div class="l">
                        <img src="../assets/img/messageAvatar.png">
                        <img src="../assets/img/groupIcon.png" class="angle">
                    </div>
                    <div class="r">
                        <p class="name">工作团队协作群</p>
                        <p class="angle">包含：<span class="ac">老</span>番薯23333</p>
                    </div>
                </div>
                <div class="contactCol">
                    <div class="l">
                        <img src="../assets/img/messageAvatar.png">
                        <img src="../assets/img/groupIcon.png" class="angle">
                    </div>
                    <div class="r">
                        <p class="name">周末组局群(36)</p>
                        <p class="angle">包含：请叫我<span class="ac">老</span>中医</p>
                    </div>
                </div>
                <div class="more">
                    <div class="l">
                        <img src="../assets/img/searchA.png" class="searchIcon">
                        <span>更多群聊记录</span>
                    </div>
                    <div class="r">
                        <img src="../assets/img/ArrowRight.png" class="rightIcon">
                    </div>
                </div>
            </div>

            <div class="boundary"></div>

            <!--聊天记录-->
            <div class="contact">
                <p class="headTxt">聊天记录</p>

                <div class="contactCol">
                    <div class="l">
                        <img src="../assets/img/messageAvatar.png">
                    </div>
                    <div class="r">
                        <p class="name">奇犽的小跟班</p>
                        <p class="angle">13条相关记录</p>
                    </div>
                </div>
                <div class="contactCol">
                    <div class="l">
                        <img src="../assets/img/messageAvatar.png">
                    </div>
                    <div class="r">
                        <p class="name">奇犽的小跟班</p>
                        <p class="angle">13条相关记录</p>
                    </div>
                </div>

                <div class="more">
                    <div class="l">
                        <img src="../assets/img/searchA.png" class="searchIcon">
                        <span>更多聊天记录</span>
                    </div>
                    <div class="r">
                        <img src="../assets/img/ArrowRight.png" class="rightIcon">
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>

    export default {
        data() {
            return {
                searchTxt: ""
            }
        },
        methods: {
            clearContent() {
                this.searchTxt = null
            },
            back(){
                this.$router.back()
            }
        },
        mounted(){
            this.$refs.topInp.focus();
        }
    }

</script>

<style scoped lang="less">
    .chatRecord {
        position: relative;
        width: 100%;
        height: 100%;
        .head {
            position: fixed;
            left: 0;
            top: 0;
            z-index: 99;
            display: flex;
            align-items: center;
            width: 100%;
            height: 88px;
            background-color: #fafafa;
            border-bottom: 1px solid #ABABAB;

            .inpSearch {
                display: flex;
                align-items: center;
                width: 625px;
                height: 55px;
                background: rgba(235, 236, 236, 1);
                border-radius: 28px;
                margin-left: 25px;
                margin-right: 20px;

                .searchIcon {
                    width: 28px;
                    height: 28px;
                    margin-left: 26px;
                    margin-right: 15px;
                }

                input {
                    width: 490px;
                    background: transparent;
                    margin-right: 10px;
                }

                .closeIcon {
                    width: 32px;
                    height: 32px;
                }
            }

            p {
                font-size: 28px;
                font-family: PingFangSC-Regular;
                font-weight: 400;
                color: rgba(188, 189, 189, 1);
            }
        }

        .searchContent {
            position: absolute;
            top: 88px;
            bottom: 0;
            width: 100%;
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
            .contact {
                width: 100%;
                box-sizing: border-box;
                padding-left: 30px;
                background-color: #fff;

                .headTxt {
                    width: 100%;
                    height: 77px;
                    line-height: 77px;
                    font-size: 28px;
                    font-family: PingFangSC-Regular;
                    font-weight: 400;
                    color: rgba(140, 140, 140, 1);
                }

                .contactCol {
                    display: flex;
                    align-items: center;
                    width: 100%;
                    height: 130px;
                    border-top: 1px solid #EEEEEE;

                    .l {
                        position: relative;
                        width: 90px;
                        height: 90px;
                        img {
                            width: 90px;
                            height: 90px;
                            border-radius: 50%;
                            box-sizing: border-box;
                            border: 2px solid #D6D7DC;
                        }

                        .angle {
                            position: absolute;
                            width: 55px;
                            height: 30px;
                            right: -2px;
                            bottom: -4px;
                            z-index: 9 ;
                            border: none;
                        }

                        margin-right: 20px;
                    }

                    .r {
                        display: flex;
                        flex-direction: column;
                        p {
                            font-size: 28px;
                            font-family: PingFangSC-Regular;
                            font-weight: 400;
                            color: #323232;
                        }

                        .name {
                            .ac {
                                color: #627df1;
                            }
                        }
                        .angle {
                            margin-top: 14px;
                            font-size:28px;
                            font-family:PingFangSC-Regular;
                            font-weight:400;
                            color:rgba(140,140,140,1);
                            .ac {
                                color: #627df1;
                            }
                        }
                    }
                }

                .more {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    width: 100%;
                    height: 89px;
                    padding-left: 20px;
                    padding-right: 40px;
                    box-sizing: border-box;
                    border-top: 1px solid #EEEEEE;

                    .l {
                        display: flex;
                        align-items: center;
                        .searchIcon {
                            width: 29px;
                            height: 28px;
                            margin-right: 10px;
                        }

                        span {
                            font-size: 28px;
                            font-family: PingFangSC-Regular;
                            font-weight: 400;
                            color: rgba(96, 111, 149, 1);
                        }
                    }

                    .r {
                        .rightIcon {
                            width: 18px;
                            height: 28px;
                        }
                    }
                }

            }

            .boundary {
                width: 100%;
                height: 10px;
                background-color: #f1f5f8;
            }
        }

    }
</style>
